<template>
  <div class="search-page">
    <div class="container">
      <div class="search-header">
        <h2>搜索结果</h2>
        <p class="search-info">
          共找到 {{ goods.length }} 个与
          <span v-if="categoryName">【{{ categoryName }}】</span>
          <span v-else>“{{ keyword }}”</span>
          相关的商品
        </p>
      </div>

      <div class="good-grid">
        <router-link
          v-for="good in goods"
          :key="good.id"
          class="good-card"
          :to="`/goods/detail?id=${good.id}`"
        >
          <img :src="good.mainImage" :alt="good.title">
          <h3>{{ good.title }}</h3>
          <p class="price">¥{{ good.price.toFixed(2) }}</p>
        </router-link>
      </div>

      <!-- 无结果提示 -->
      <div v-if="goods.length === 0" class="no-result">
        <p>抱歉，没有找到相关商品</p>
        <p>建议：</p>
        <ul>
          <li>检查输入的关键词是否正确</li>
          <li>尝试使用其他搜索词</li>
          <li>使用更简单的关键词</li>
        </ul>
      </div>

      <el-pagination
        v-if="total > size"
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="size"
        :current-page="page + 1"
        @current-change="handlePageChange"
        style="margin: 30px 0; text-align: center;"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { search } from '@/api/goods'
import { ElMessage } from 'element-plus'
import { useSearchStore } from '@/stores/search'

const route = useRoute()
const router = useRouter()
const searchStore = useSearchStore()
const keyword = computed({
  get: () => searchStore.keyword,
  set: (val) => searchStore.setKeyword(val)
})
const categoryName = ref('')
const goods = ref([])
const total = ref(0)
const page = ref(0)
const size = ref(10)

const performSearch = async (keyword) => {
  let data = ''
  if (categoryName.value) data = categoryName.value
  else if (keyword) data = keyword

  if (!data) {
    goods.value = []
    total.value = 0
    return
  }

  try {
    const res = await search({ data, page: page.value, size: size.value })
    if (res && Array.isArray(res.records)) {
      goods.value = res.records
      total.value = res.total
    } else if (Array.isArray(res)) {
      goods.value = res
      total.value = res.length
    } else {
      goods.value = []
      total.value = 0
    }
  } catch (e) {
    ElMessage.error('搜索失败')
    goods.value = []
    total.value = 0
  }
}

watch(
  () => route.query.keyword,
  (newKeyword) => {
    if (newKeyword) {
      keyword.value = newKeyword
      performSearch(newKeyword)
    }
  },
  { immediate: true }
)

const handlePageChange = (newPage) => {
  page.value = newPage - 1
  performSearch(keyword.value)
}

function goToSearch(category) {
  router.push({ path: '/search', query: { categoryName: category.name } })
}
</script>

<style scoped>
.search-page {
  padding: 20px 0;
  min-height: 100vh;
  background-color: var(--bg-color-page);
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

.search-header {
  margin-bottom: 20px;
}

.search-info {
  color: var(--text-secondary);
  margin-top: 10px;
}

.good-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}

.good-card {
  background: white;
  padding: 15px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
}

.good-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.good-card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 4px;
}

.good-card h3 {
  margin: 10px 0;
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.price {
  color: var(--danger-color);
  font-size: 18px;
  font-weight: bold;
}

.no-result {
  text-align: center;
  padding: 40px 0;
  color: var(--text-regular);
}

.no-result ul {
  list-style: none;
  padding: 0;
  margin-top: 20px;
}

.no-result li {
  margin: 10px 0;
  color: var(--text-secondary);
}

/* 响应式布局 */
@media screen and (max-width: 768px) {
  .good-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 480px) {
  .good-grid {
    grid-template-columns: 1fr;
  }
}
</style>